<template>
  <div class="p-2">
    <el-tabs
      v-if="checkRole(5)"
      v-model="tabsActive"
      @tab-click="tabClick"
    >
      <el-tab-pane
        name="1"
        label="业务协议"
      >
        <business-table
          v-if="tabsActive==1"
          ref="businessTableRef"
        ></business-table>
      </el-tab-pane>
    </el-tabs>
    <el-tabs
      v-if="checkRole(7)"
      v-model="tabsActive"
      @tab-click="tabClick"
    >
      <el-tab-pane
        name="1"
        label="业务协议"
      >
        <business-table
          v-if="tabsActive==1"
          ref="businessTableRef"
        ></business-table>
      </el-tab-pane>
      <el-tab-pane
        name="2"
        label="授权协议"
      >
        <auth-table
          v-if="tabsActive==2"
          ref="authTableRef"
        ></auth-table>
      </el-tab-pane>
    </el-tabs>
    <business-table
      ref="tabTableRef1"
      v-if="checkRole(8)"
    ></business-table>
  </div>
</template>

<script setup name="contractInquiry" lang="ts">
import { checkRole } from '@/utils/permission'; // 权限判断函数
import businessTable from '../components/businessTable.vue';
import authTable from '../components/authTable.vue';
import { TabsPaneContext } from 'element-plus';
const businessTableRef = ref<any>({});
const authTableRef = ref<any>({});

const tabsActive = ref<string | number>('1');
const tabClick = (pane: TabsPaneContext, ev: Event) => {
  if (pane.props.name == tabsActive.value) return;
  tabsActive.value = pane.props.name || '';
  if (tabsActive.value == '1') {
    businessTableRef.value.getList();
  } else {
    authTableRef.value.getList();
  }
};
onMounted(() => {});
</script>

<style lang="scss" scoped></style>
